<template>
  <view class="iphone-frame" :class="{ 'light-theme': isLightTheme }">
    <!-- 搜索栏 -->
    <view class="nav-bar">
      <!-- 顶部安全区域占位 -->
      <view class="safe-top"></view>

      <view class="nav-content">
        <!-- 添加标题区域 -->
        <view class="nav-center">
          <text class="nav-title">搜索菜单</text>
        </view>
      </view>

      <view class="nav-content">
        <view class="search-bar">
          <view class="search-input-wrapper">
            <image src="/static/images/icon-sousuo.png" class="search-icon" mode="aspectFill" @click="handleSearch">
            </image>
            <input type="text" v-model="searchKeyword" placeholder="搜索菜谱、食材..." placeholder-class="search-placeholder"
              @confirm="handleSearch" />
          </view>
          <view class="cancel-btn" @click="handleCancel">取消</view>
        </view>
      </view>
    </view>

    <!-- 搜索结果区域 -->
    <view class="search-results">
      <recipe-results v-if="searchResults.length > 0" :recipes="searchResults" @view-recipe="viewRecipe"
        :is-light-theme="isLightTheme" />
      <view v-else-if="isSearching" class="searching">
        <text>搜索中...</text>
      </view>
      <view v-else-if="hasSearched" class="no-results">
        <image src="/static/images/meiyougengduole.png" class="no-results-icon" mode="aspectFill"></image>
        <text>没有找到相关内容</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import RecipeResults from '/components/RecipeResults.vue';
import recipeData from '/static/data/recipe.json';

// 搜索关键词
const searchKeyword = ref('');
// 搜索结果
const searchResults = ref([]);
// 搜索状态
const isSearching = ref(false);
const hasSearched = ref(false);
// 主题状态
const isLightTheme = ref(false);

// 初始化主题
onMounted(() => {
  initTheme();
});

// 初始化主题函数
function initTheme() {
  // 先检查本地是否有用户保存的主题偏好
  const savedTheme = uni.getStorageSync('theme');

  if (savedTheme) {
    // 如果有保存的主题，使用保存的主题
    isLightTheme.value = savedTheme === 'light';
  } else {
    // 如果没有保存的主题，根据当前时间设置主题
    const now = new Date();
    const hour = now.getHours();
    // 早上6点到下午6点显示白天主题，其他时间显示黑夜主题
    isLightTheme.value = hour >= 6 && hour < 18;
  }
}

// 处理搜索
function handleSearch() {
  if (!searchKeyword.value.trim()) {
    uni.showToast({
      title: '请输入搜索内容',
      icon: 'none'
    });
    return;
  }

  isSearching.value = true;
  hasSearched.value = true;

  // 模拟搜索延迟
  setTimeout(() => {
    const keyword = searchKeyword.value.toLowerCase().trim();

    // 在菜谱数据中搜索
    searchResults.value = recipeData.filter(recipe => {
      const recipeName = recipe.name.toLowerCase();
      const recipeStuff = recipe.stuff.toLowerCase();

      return recipeName.includes(keyword) || recipeStuff.includes(keyword);
    });

    isSearching.value = false;
  }, 300);
}

// 处理取消
function handleCancel() {
  // 返回上一页
  uni.navigateBack();
}

// 查看菜谱
function viewRecipe(recipe) {
  uni.showToast({
    title: '开发中...',
    icon: 'none'
  });
}

// 清空搜索
function clearSearch() {
  searchKeyword.value = '';
  searchResults.value = [];
  hasSearched.value = false;
}
</script>

<style scoped lang="scss">
/* 布局框架 */
.iphone-frame {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  overflow: hidden;
  background-color: #1a1a1a;
  color: #fff;
  margin: 0;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 白天主题 */
.light-theme {
  background-color: #f5f5f5;
  color: #333;
}

/* 导航栏 */
.nav-bar {
  position: relative;
  width: 100%;
  border-bottom: 1upx solid rgba(255, 255, 255, 0.1);
}

/* 顶部安全区域，适配刘海屏 */
.safe-top {
  /* 优先使用环境变量 */
  height: calc(var(--status-bar-height, 0px) + env(safe-area-inset-top, 0px));
  /* 为不支持上述变量的环境提供默认高度 */
  min-height: 44px;
  width: 100%;
  background-color: #1a1a1a;
  /* 保持与导航栏背景一致 */
}

.light-theme .safe-top {
  background-color: #1a1a1a;
  /* 与夜间模式保持一致 */
}

.light-theme .nav-bar {
  border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
}

.nav-content {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0 40upx;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  width: 100%;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 24upx;
  padding: 8upx 20upx;
  margin-right: 20upx;
}

.light-theme .search-input-wrapper {
  background-color: rgba(0, 0, 0, 0.05);
}

.search-icon {
  width: 32upx;
  height: 32upx;
  margin-right: 12upx;
}

.search-input-wrapper input {
  flex: 1;
  color: #fff;
  font-size: 28upx;
  background: transparent;
}

.light-theme .search-input-wrapper input {
  color: #333;
}

.search-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 28upx;
}

.light-theme .search-placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.cancel-btn {
  color: #fff;
  font-size: 28upx;
  padding: 4upx 0;
}

.light-theme .cancel-btn {
  color: #333;
}

/* 搜索结果区域 */
.search-results {
  flex: 1;
  padding: 40upx;
  overflow-y: auto;

  ::v-deep .recipe-list {
    margin-top: unset;
  }
}

.searching,
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200upx;
}

.no-results-icon {
  width: 200upx;
  height: 200upx;
  margin-bottom: 40upx;
}

.searching text,
.no-results text {
  font-size: 32upx;
  color: rgba(255, 255, 255, 0.5);
}

.light-theme .searching text,
.light-theme .no-results text {
  color: rgba(0, 0, 0, 0.3);
}

.clear-btn {
  width: 24upx;
  height: 24upx;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" d="M512 512L330.6 330.6a32 32 0 1 0-45.2 45.2L466.8 512 285.4 693.4a32 32 0 0 0 45.2 45.2L512 557.2l171.4 171.4a32 32 0 0 0 45.2-45.2L557.2 512l181.4-181.4a32 32 0 0 0-45.2-45.2L512 466.8z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
}

.light-theme .clear-btn {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="%23333333" d="M512 512L330.6 330.6a32 32 0 1 0-45.2 45.2L466.8 512 285.4 693.4a32 32 0 0 0 45.2 45.2L512 557.2l171.4 171.4a32 32 0 0 0 45.2-45.2L557.2 512l181.4-181.4a32 32 0 0 0-45.2-45.2L512 466.8z"/></svg>');
}

.nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.nav-title {
  font-size: 36upx;
  font-weight: bold;
  color: #fff;
}

.light-theme .nav-title {
  color: #333;
}
</style>